<template>
    <view class="container">
        <uni-card title="通知" :isFull="true" sub-title="新朋友" extra="清空" :thumbnail="avatar">
            <uni-list>
                <uni-swipe-action ref="swipeAction">
                    <uni-swipe-action-item
                        v-for="(item, index) in newFriends"
                        :right-options="item.status == 0 && userStore.userId != item.applyUserInfo.userId? options2 : options1"
                        :key="index"
                        :show="isOpenIndex == index? 'right': 'none'"
                        @change="swipeChange($event, index)"
			            @click="swipeClick($event, index, item)"
                    >
                    <uni-list-chat
                        :avatar="userStore.userId == item.applyUserInfo.userId ? item.receiveUserInfo.userAvatar : item.applyUserInfo.userAvatar"
                        :avatar-circle="true" 
                        :title="userStore.userId == item.applyUserInfo.userId ? item.receiveUserInfo.nickName : item.applyUserInfo.nickName"
                        :note="userStore.userId == item.applyUserInfo.userId ? item.receiveUserInfo?.personalSignature || '' : item.applyUserInfo?.personalSignature || ''">
                            <view class="chat-custom-right">
                                <text class="chat-custom-text">{{ formatData(item.lastApplyTime) }}</text>
                                <view class="chat-custom-status" v-if="item.status == 0 && userStore.userId == item.applyUserInfo.userId">等待对方验证</view>
                                <view class="chat-custom-status btn" @tap="handleApply(index)" v-else-if="item.status == 0 && userStore.userId != item.applyUserInfo.userId">待处理</view>
                                <view class="chat-custom-status" v-else-if="item.status == 1">已同意</view>
                                <view class="chat-custom-status" v-else-if="item.status == 2">已拒绝</view>
                                <view class="chat-custom-status" v-else-if="item.status == 3 && userStore.userId == item.applyUserInfo.userId">已拉黑</view>
                                <view class="chat-custom-status" v-else-if="item.status == 3 && userStore.userId != item.applyUserInfo.userId">对方已拉黑</view>
                            </view>
                            
                        </uni-list-chat>
                    </uni-swipe-action-item>
                </uni-swipe-action>
                
            </uni-list>
        </uni-card>
    </view>
</template>

<script setup>
import { showAllApply } from "../../api/contacts";
import { ref, onMounted } from "vue" 
import { formatData } from "../../util/time";
import { useUserInfoStore } from "../../store/user";
import { agreeApply, refuseApply, deleteApply } from "../../api/contacts";

const options2 = ref([
    {
        text: '同意',
        style: {
            backgroundColor: '#67C23A'
        }
    },
    {
        text: '拒绝',
        style: {
            backgroundColor: '#F56C6C'
        }
    }
]) 
const options1 = ref([{
    text: '删除',
    style: {
        backgroundColor: '#F56C6C'
    }
}])
const userStore = useUserInfoStore().getUser
const newFriends = ref([])
const isOpenIndex = ref(-1)
//点击待处理操作
const handleApply = (index) => {
    isOpenIndex.value = index
}
//左滑列表
const swipeChange = (e) => {
    isOpenIndex.value = -1
}
//点击左滑列表中选项
const swipeClick = async (e, index, item) => {
    console.log('点击：', e);
    console.log('当前索引：', index);
    let {content} = e
    let data = {
        applyUserId: item.applyUserId,
        receiveUserId: item.receiveUserId
    }
    if(content.text == '同意'){
        //发送同意消息
        let res = await agreeApply(data)
        if(res && res.code == 0){
            item.status = 1
        }
    }else if(content.text == '拒绝'){
        //拒绝
        let res = await refuseApply(data)
    }else if(content.text == '删除'){
        //删除
        let res = await deleteApply(data)
    }
    
    
}

onMounted(async () => {
    // 获取新朋友列表
    let res = await showAllApply()
    if(res && res.code == 0){
        newFriends.value = res.result
		console.log(res)
    }
})

</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #f5f5f5;
    .chat-custom-right {
        flex: 1;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }

    .chat-custom-text {
        font-size: 12px;
        color: #999;
    }
    .chat-custom-status{
        margin-top: 15rpx;
        font-size: 12px;
    }
    .btn{
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 3px 6px;
        &:active{
            background-color: #ccc;
        }
    }
}
</style>